 //基于准备好的dom，初始化echarts实例
var charts = [];
var myChart=echarts.init(document.getElementById('tab1'));
var myChart2=echarts.init(document.getElementById('tab2'));

//指定图表的配置项和数据
var option={
		   title: {
		        x: 'center',
		        text: '点击次数排行',
		        subtext: 'No1~No10',
		    },
		    tooltip: {
		        trigger: 'item'
		    },
		    toolbox: {
		        show: true,
		        feature: {
		            dataView: {show: true, readOnly: false},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    calculable: true,
		    grid: {
		        borderWidth: 0,
		        y: 80,
		        y2: 60
		    },
		    xAxis: [
		        {
		            type: 'category',
		            show: false,
		            data: []
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            show: false
		        }
		    ],
		    series: [
		        {
		            name: '点击次数排行',
		            type: 'bar',
		            itemStyle: {
		                normal: {
		                    color: function(params) {
		                        // build a color map as your need.
		                        var colorList = [
		                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
		                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
		                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
		                        ];
		                        return colorList[params.dataIndex]
		                    },
		                    label: {
		                        show: true,
		                        position: 'top',
		                        formatter: '{b}\n{c}'
		                    }
		                }
		            },
		            data: []
		        }
		    ]
  };
  
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
  myChart2.setOption(option);
  myChart2.setOption({
  		   title: {
	        x: 'center',
	        text: '使用用户数排行',
	        subtext: 'No1~No10',
		   }
  })
  charts.push(myChart); 
  charts.push(myChart2); 
// function loadData(myChart){
	$.ajax({
		url: '/HotMenus/findHotMenusByclick',
	    type: 'get',
	    dataType: 'json',
	    success: function (res) {
	    	
	    	var categories = res.data.categories;
	    	var data = res.data.value;
	    	 // 填入数据
	        myChart.setOption({
	            xAxis: {
	                data: categories
	            },
	            series: [{
	                // 根据名字对应到相应的系列
	                name: '点击次数排行',
	                data: data
	            }]
	        });
	    },
	    error: function (err) {
	    	if(err.responseJSON.message=="session clean"){
	            errorMessage(_this.$message, '登陆已失效重新登陆!');
	            toLogin();
	            return;
	        }else if (err.status == 403){
	            errorMessage(_this.$message, "没有权限，请先申请该权限！");
	            return;
	        }
	    	errorMessage(_this.$message, '获取点击次数排行出错！')
	    }
	})
	$.ajax({
		url: '/HotMenus/findHotMenusByuser',
	    type: 'get',
	    dataType: 'json',
	    success: function (res) {
	    	
	    	var categories = res.data.categories;
	    	var data = res.data.value;
	    	 // 填入数据
	        myChart2.setOption({
	            xAxis: {
	                data: categories
	            },
	            series: [{
	                // 根据名字对应到相应的系列
	                name: '点击次数排行',
	                data: data
	            }]
	        });
	    },
	    error: function (err) {
	    	if(err.responseJSON.message=="session clean"){
	            errorMessage(_this.$message, '登陆已失效重新登陆!');
	            toLogin();
	            return;
	        }else if (err.status == 403){
	            errorMessage(_this.$message, "没有权限，请先申请该权限！");
	            return;
	        }
	    	errorMessage(_this.$message, '获取点击次数排行出错！')
	    }
	})
	window.onresize = function(){
        for(var i = 0; i < charts.length; i++){
            charts[i].resize();
        }
    };
